<template>
  <div>
    <ul class="infinite-list">
      <li
        v-for="(activity, index) in activities"
        :key="index">
        <el-card shadow="always"
                 style="margin-bottom: 20px">
          <div style="margin-bottom: 20px; border-bottom: 1px solid gray">
            <el-link
              :underline="false"
              v-on:click.native="showBlog(activity)"
              style="font-weight: 400; font-size: 26px">
              <router-link to="/blog/showBlog" tag="span">
                {{ activity.title }}
              </router-link>
            </el-link>
          </div>
          <div class="introduction">
            <span style="padding-right: 10px"><i class="fa fa-user-o" aria-hidden="true"></i> 作者：{{activity.author}}</span>
            <span style="padding-right: 10px"><i class="fa fa-clock-o" aria-hidden="true"></i> 发表于 {{activity.createTime}}</span>
          </div>
          <div class="abstract">
        <span>
          摘要：{{ activity.abstract }}...
          <el-link
            :underline="true"
            v-on:click.native="showBlog(activity)">
            <router-link to="/blog/showBlog" tag="span">
              &nbsp;阅读全文
            </router-link>
          </el-link>
        </span>
          </div>
          <div>
            <span>
              <el-tag size="mini" @click.native="onSubmit(activity.tid,'type')">{{ activity.blogType }}</el-tag>
            </span>
            <span class="tag">
              <el-tag
                type="warning"
                v-for="label in activity.blogLabel"
                :key="label"
                style="margin: 2px"
                size="mini" @click.native="onSubmit(label,'label')">
                <i class="fa fa-tag" aria-hidden="true"></i>
                {{ label }}
              </el-tag>
            </span>
            <div style="float: right; padding-right: 10px;color: #787977;"><i class="fa fa-comments"></i> {{activity.commentsNum}}</div>
            <div style="float: right; padding-right: 10px;color: #787977;"><i class="fa fa-eye" aria-hidden="true"></i> {{activity.reads}}</div>
          </div>
        </el-card>
      </li>
    </ul>

    <el-button v-if="button" @click.native="load" style="display: block;margin: 0 auto">
      <span v-if="loading">加载更多</span>
      <span v-if="loadingIcon">加载中<i class="el-icon-loading"></i></span>
    </el-button>
    <p v-if="noMore" style="text-align: center">没有更多了~</p>
  </div>
</template>

<script>
import qs from "qs";
import marked from 'marked';

export default {
  name: "ShowBlog",
  data() {
    return {
      start: 0,
      activities: [],
      button:true,
      loading: true,
      loadingIcon:false,
      count:0
    }
  },
  computed: {
    noMore () {
      return this.count === this.activities.length;
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    load(){
      if (this.count>this.activities.length) {
        this.loadingIcon=true;
        this.loading=false;
        setTimeout(() => {
          this.start = this.start + 10;
          this.getBlogMessage();
          this.loadingIcon=false;
          this.loading=true;
        }, 2000)

      }
    },
    onSubmit(id,type){
      this.$router.push({path:'/blog/search',query:{keyword:id, type:type}});
    },
    getBlogMessage() {
      this.axios.post("/blog/queryAllBlogMessage", qs.stringify({
        start: this.start
      })).then((response) => {
        let reg = /<\/?.+?\/?>/g;
        let regPre = /<pre>[\s\S]*<\/pre>/g;
        for (let i = 0; i < response.data.length; i++) {
          let labels = response.data[i].blogLabel.split(',');
          let blogs = {
            bid:'',
            tid:'',
            title: '',
            author: '',
            createTime: '',
            updateTime: '',
            blogLabel: [],
            blogType: '',
            reads: 0,
            likeNum: 0,
            article: '',
            editType: 1,
            abstract: '',
            commentsNum:0,
          };
          for (let j = 0; j < labels.length; j++) {
            blogs.blogLabel.push(labels[j]);
          }
          blogs.bid = response.data[i].bid;
          blogs.tid = response.data[i].tid;
          blogs.title = response.data[i].title;
          blogs.blogType = response.data[i].blogType;
          blogs.createTime = response.data[i].createTime;
          blogs.updateTime = response.data[i].updateTime;
          blogs.reads = response.data[i].reads;
          blogs.likeNum = response.data[i].likeNum;
          blogs.article = response.data[i].article;
          blogs.editType = response.data[i].editorType;
          let abstr = '';
          if (blogs.editType === 2) {
            abstr = marked(response.data[i].article).replace(regPre, "");
          } else {
            abstr = response.data[i].article.replace(regPre, "");
          }
          blogs.abstract = abstr.replace(reg, "").substring(0, 80);

          this.axios.post("/user/queryUserById",qs.stringify({
            id:response.data[i].uid
          })).then((response)=>{
            blogs.author = response.data.username;
          })

          this.axios.post("/blog/countCommentsNum",qs.stringify({
            bid:response.data[i].bid
          })).then((response)=>{
            blogs.commentsNum = response.data;
          })
          this.activities.push(blogs);
        }
        if (this.activities.length===this.count){
          this.button=false;
        }
      })
    },
    showBlog(blog) {
      this.$store.commit('setBlog', blog);
      sessionStorage.setItem("blogDetail",JSON.stringify(blog));
    },
    countBlogNum(){
      this.axios.post('/blog/countBlogNumber').then((response)=>{
        this.count=response.data;
      })
    }
  },
  mounted() {
    sessionStorage.removeItem("blogDetail");
    this.countBlogNum();
    this.getBlogMessage();
  }
}
</script>

<style scoped>
.abstract{
  width: 100%;
  color: #555;
  font-size: 16px;
  line-height: 2;
  padding: 10px 0;
}
.tag{
  font-size: 12px;
  color: #999;

}
.el-tag{
  cursor: pointer;
}
.introduction{
  width: 100%;
  font-size: 12px;
  color: #999;
  padding: 10px 0;
}
ul li {
  list-style-type: none;
}
ul{
  margin: 0;
  padding: 0;
}
.el-card{
  border-radius: 15px;
}
</style>
